(ns re-agent-demo.core
  (:require [reagent.core :as r]
            [goog.dom :as gdom]))

(enable-console-print!)

(defn better-mouse-trap [mouse]
  (r/with-let [mice (r/atom 1)]
    (into [:div
           [:button {:on-click (fn [] (swap! mice #(inc (mod % 4))))}
            "Catch!!"]]
          (repeat @mice mouse))))


(defn announcement []
  (r/create-class
   {:component-did-mount               ;; the name of a lifecycle function
    #(println "component-did-mount")   ;; your implementation
    
    :component-will-mount              ;; the name of a lifecycle function
    #(println "component-will-mount")
    :reagent-render (fn []
                      [:h3 "This is form 3 component!"])}))

(defn greet-number
  "I say hello to an integer"
  [num]                             ;; an integer
  [:div (str "Hello #" num)])       ;; [:div "Hello #1"]

(defn more-button
  "I'm a button labelled 'More' which increments counter when clicked"
  [counter] ;; a ratom
  [:button  {:class "button-class"
          :on-click  #(swap! counter inc)} ;; increment the int value in counter
   "More"])

(defn parent
  [] 
  (let [counter  (reagent.ratom/atom 1)] ;; the render closes over this state
    (fn  parent-renderer 
      []
      [:div 
       [more-button counter]       ;; no @ on counter
       [greet-number @counter]]))) ;; notice the @. The prop is an int
      
(defn root-app []
  [:div
   [:h1 "Hello Re-Agent"]
   [better-mouse-trap [:img
                       {:src "https://www.domyownpestcontrol.com/images/content/mouse.jpg"
                        :style {:width "150px" :border "2px solid"}}]]
   [better-mouse-trap [:img
                       {:src "https://avatars1.githubusercontent.com/u/9254615?v=3&s=150"
                        :style {:width "150px" :border "2px solid"}}]]
   [announcement]
   [parent]
   ])

(r/render-component [root-app]
                    (gdom/getElement "app")
                    (fn []
                      (println "Init Done")))
